<!--
  Component Appearance Customization Component

  This demo shows how to customize the appearance of CesiumJS components
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Component Appearance Customization
  Description: This demo shows how to customize the appearance of CesiumJS components
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <div class="demo-container">
    <BaseCesiumViewer 
      ref="cesiumViewer" 
      @viewer-ready="onViewerReady"
    />
    <div class="control-panel">
      <h3>Appearance Controls</h3>
      
      <div class="control-group">
        <h4>Point Settings</h4>
        <ControlItem 
          type="range"
          label="Point Size"
          :value="pointSettings.size"
          :min="1"
          :max="50"
          @update:value="pointSettings.size = $event"
          @input="updatePointEntity"
        />
        
        <ControlItem 
          type="select"
          label="Point Color"
          :value="pointSettings.color"
          @update:value="pointSettings.color = $event"
          @change="updatePointEntity"
        >
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="yellow">Yellow</option>
        </ControlItem>
        
        <ControlItem 
          type="checkbox"
          label="Show Outline"
          :value="pointSettings.outline"
          label-after
          @update:value="pointSettings.outline = $event"
          @change="updatePointEntity"
        />
      </div>
      
      <div class="control-group">
        <h4>Billboard Settings</h4>
        <ControlItem 
          type="range"
          label="Billboard Scale"
          :value="billboardSettings.scale"
          :min="0.1"
          :max="3"
          :step="0.1"
          @update:value="billboardSettings.scale = $event"
          @input="updateBillboardEntity"
        />
        
        <ControlItem 
          type="select"
          label="Billboard Color"
          :value="billboardSettings.color"
          @update:value="billboardSettings.color = $event"
          @change="updateBillboardEntity"
        >
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="white">White</option>
        </ControlItem>
      </div>
      
      <div class="control-group">
        <h4>Polygon Settings</h4>
        <ControlItem 
          type="select"
          label="Polygon Color"
          :value="polygonSettings.color"
          @update:value="polygonSettings.color = $event"
          @change="updatePolygonEntity"
        >
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="yellow">Yellow</option>
        </ControlItem>
        
        <ControlItem 
          type="checkbox"
          label="Extruded"
          :value="polygonSettings.extruded"
          label-after
          @update:value="polygonSettings.extruded = $event"
          @change="updatePolygonEntity"
        />
        
        <ControlItem 
          v-if="polygonSettings.extruded"
          type="range"
          label="Extrusion Height"
          :value="polygonSettings.extrudedHeight"
          :min="0"
          :max="300000"
          :step="10000"
          @update:value="polygonSettings.extrudedHeight = $event"
          @input="updatePolygonEntity"
        />
      </div>
      
      <div class="control-group">
        <h4>Label Settings</h4>
        <ControlItem 
          type="text"
          label="Label Text"
          :value="labelSettings.text"
          @update:value="labelSettings.text = $event"
          @input="updateLabelEntity"
        />
        
        <ControlItem 
          type="range"
          label="Label Size"
          :value="labelSettings.fontSize"
          :min="8"
          :max="36"
          @update:value="labelSettings.fontSize = $event"
          @input="updateLabelEntity"
        />
        
        <ControlItem 
          type="select"
          label="Label Color"
          :value="labelSettings.color"
          @update:value="labelSettings.color = $event"
          @change="updateLabelEntity"
        >
          <option value="white">White</option>
          <option value="black">Black</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </ControlItem>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import ControlItem from '../components/ControlItem.vue';

export default {
  name: 'ComponentAppearanceCustomization',
  components: {
    BaseCesiumViewer,
    ControlItem
  },
  setup() {
    const cesiumViewer = ref(null);
    let viewer = null;
    let Cesium = null;
    
    // References to Cesium entities
    let pointEntity = null;
    let billboardEntity = null;
    let polygonEntity = null;
    let labelEntity = null;
    
    // Reactive settings for UI controls
    const pointSettings = reactive({
      size: 10,
      color: 'red',
      outline: true
    });
    
    const billboardSettings = reactive({
      scale: 1.0,
      color: 'white'
    });
    
    const polygonSettings = reactive({
      color: 'red',
      extruded: true,
      extrudedHeight: 100000
    });
    
    const labelSettings = reactive({
      text: 'Custom Label',
      fontSize: 16,
      color: 'white'
    });

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      viewer = payload.viewer;
      Cesium = payload.Cesium;
      
      // Create entities
      createEntities();
      
      // Set the initial camera view
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-73.0, 40.0, 2000000)
      });
    };
    
    // Create all entities
    const createEntities = () => {
      // Create a point entity
      pointEntity = viewer.entities.add({
        name: 'Customizable Point',
        position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
        point: {
          pixelSize: pointSettings.size,
          color: getColor(pointSettings.color),
          outlineColor: pointSettings.outline ? Cesium.Color.BLACK : undefined,
          outlineWidth: pointSettings.outline ? 1 : 0
        }
      });
      
      // Create a billboard entity
      billboardEntity = viewer.entities.add({
        name: 'Customizable Billboard',
        position: Cesium.Cartesian3.fromDegrees(-74.0, 40.0),
        billboard: {
          image: './images/logo.png',
          scale: billboardSettings.scale,
          color: getColor(billboardSettings.color)
        }
      });
      
      // Create a polygon entity
      polygonEntity = viewer.entities.add({
        name: 'Customizable Polygon',
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -72.0, 40.5,
            -71.0, 40.5,
            -71.0, 39.5,
            -72.0, 39.5
          ]),
          material: getColor(polygonSettings.color).withAlpha(0.7),
          extrudedHeight: polygonSettings.extruded ? polygonSettings.extrudedHeight : undefined
        }
      });
      
      // Create a label entity
      labelEntity = viewer.entities.add({
        name: 'Customizable Label',
        position: Cesium.Cartesian3.fromDegrees(-73.0, 40.0),
        label: {
          text: labelSettings.text,
          font: `${labelSettings.fontSize}px sans-serif`,
          fillColor: getColor(labelSettings.color),
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -15)
        }
      });
    };
    
    // Update point entity based on settings
    const updatePointEntity = () => {
      if (pointEntity) {
        pointEntity.point.pixelSize = pointSettings.size;
        pointEntity.point.color = getColor(pointSettings.color);
        pointEntity.point.outlineColor = pointSettings.outline ? Cesium.Color.BLACK : undefined;
        pointEntity.point.outlineWidth = pointSettings.outline ? 1 : 0;
      }
    };
    
    // Update billboard entity based on settings
    const updateBillboardEntity = () => {
      if (billboardEntity) {
        billboardEntity.billboard.scale = billboardSettings.scale;
        billboardEntity.billboard.color = getColor(billboardSettings.color);
      }
    };
    
    // Update polygon entity based on settings
    const updatePolygonEntity = () => {
      if (polygonEntity) {
        polygonEntity.polygon.material = getColor(polygonSettings.color).withAlpha(0.7);
        polygonEntity.polygon.extrudedHeight = polygonSettings.extruded ? polygonSettings.extrudedHeight : undefined;
      }
    };
    
    // Update label entity based on settings
    const updateLabelEntity = () => {
      if (labelEntity) {
        labelEntity.label.text = labelSettings.text;
        labelEntity.label.font = `${labelSettings.fontSize}px sans-serif`;
        labelEntity.label.fillColor = getColor(labelSettings.color);
      }
    };
    
    // Helper function to get Cesium color from string
    const getColor = (colorName) => {
      console.log(colorName);
      switch (colorName) {
        case 'red': return Cesium.Color.RED;
        case 'blue': return Cesium.Color.BLUE;
        case 'green': return Cesium.Color.GREEN;
        case 'yellow': return Cesium.Color.YELLOW;
        case 'white': return Cesium.Color.WHITE;
        case 'black': return Cesium.Color.BLACK;
        default: return Cesium.Color.WHITE;
      }
    };

    return {
      cesiumViewer,
      onViewerReady,
      pointSettings,
      billboardSettings,
      polygonSettings,
      labelSettings,
      updatePointEntity,
      updateBillboardEntity,
      updatePolygonEntity,
      updateLabelEntity
    };
  }
};
</script>

<style scoped>
.demo-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  max-height: calc(100% - 40px);
  background: rgba(40, 40, 40, 0.8);
  color: white;
  padding: 15px;
  border-radius: 5px;
  overflow-y: auto;
  z-index: 100;
  backdrop-filter: blur(5px);
}

.control-group {
  margin-bottom: 20px;
}

.control-group h4 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
}

.control-item {
  margin-bottom: 10px;
}

.control-item label {
  display: block;
  margin-bottom: 5px;
}

.control-item input[type="range"] {
  width: 100%;
}

.control-item input[type="text"] {
  width: 100%;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #666;
  background: #333;
  color: white;
}

.control-item select {
  width: 100%;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #666;
  background: #333;
  color: white;
}
</style>